<template>
  <div class="options">
    <div class="options-main border-bottom">
      <switches
        class="switch-component" 
        :switches="switchesData"
        :activeSwitchIndex="activeSwitchIndex"
        @click="updateIndex"
        >
      </switches>
      <div class="buttons">
        <button-with-style
          class="button"
          :key="item.id" 
          @click='handleButtonClick'
          v-for="item in options" :item="item">
        </button-with-style>
      </div>
    </div>
  </div>
</template>

<script>
import Switches from '@/components/base/switches/switches'
import ButtonWithStyle from '@/components/base/buttons/button-with-style'

export default {
  components: {
    Switches,
    ButtonWithStyle
  },
  props: {
    activeSwitchIndex: {
      type: Number,
      default: 0
    },
    options: {
      type: Array,
      default: function() {
        return  [
          {
            id: 1,
            name: '整合'
          },
          {
            id: 2,
            name: '快捷选号'
          }
        ]
      }
    }
  },
  data() {
    return {
      // 快速选择
      showButtons: false,
      // 快速选择disabled
      fastchooseDisabled: false,
      // 整合disabled
      integrateDisabled: false,
      switchesData: [
        {name: 'A面'},
        {name: 'B面'},
      ],
    }
  },
  created() {
  },
  methods: {
    updateIndex(index) {
      this.$emit('click', index)
    },
    handleButtonClick(item) {
      this.$emit('on-msg', item)
    }
  }
}
</script>

<style lang="stylus" scoped>
  .options
    .options-main 
      display flex 
      box-sizing border-box 
      padding 5px 0
      padding-left 20px
      box-sizing border-box
      @media screen and (max-width 750px)
        padding-left 10px
      .buttons 
        display flex
        margin-left 15px
        .button 
          margin-right 10px

      
</style>
